<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid;
      }
      .container {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box" id="myid" myattr="123">111</div>
    <script>
      var boxEle = document.querySelector(".box");
      // 1.操作类名className(重点);
      // 设置类名；注意：设置的类名会覆盖之前的类名；
      document.onclick = function () {
        // boxEle.className = "con";
        boxEle.className += "con";
      };
      console.log(boxEle.className);
      // 总结：1.可以获取类名 2.可以设置类名 （不要覆盖了之前的类名）;

      // 2.操作id
      console.log(boxEle.id);
      document.onclick = function () {
        boxEle.id = "hallo";
      };

      // 3.操作元素的属性；
      // 1.获取属性值  var 属性值 =  getAttribute("属性名");
      var res = boxEle.getAttribute("class");
      console.log(res);
      // 获取元素的所有属性attributes
      var arr = boxEle.attributes;
      console.log(typeof arr[2]);

      // 2.设置属性 : 元素.setAttribute("属性名","属性值");
      document.onclick = function () {
        boxEle.setAttribute("mya", "world");
      };

      // 3.删除属性 removeAttribute("属性名");
      document.onclick = function () {
        boxEle.removeAttribute("class");
      };

      console.dir(boxEle);
    </script>
  </body>
</html>
